<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="login">
    <p>
        账号：<input type="text" class="user">
    </p>
    <p>
        密码：<input type="text" class="pass">
    </p>
    <p>
        <button class="btn">登录</button>
    </p>
</div>

<script>
// 接口说明文档：
// 接口地址:http://localhost:8080/users/login
// 请求方式:post
// 请求参数:user账号,pass密码
// 返回值:{"code":1,"msg":"登录成功"}

let user = document.querySelector('.user')
let pass = document.querySelector('.pass')
let btn = document.querySelector('.btn')

// 点击发送登录请求
btn.onclick = function (){
    // 1.创建一个数据交互对象
    let xhr = new XMLHttpRequest()

    // 2.初始化请求（设置请求地址、请求方式等）
    xhr.open('post','http://localhost:8080/users/login')

    // 3.设置请求头（告诉服务端发送的数据格式）
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

    // 4.将请求发送到服务端
    let data = 'user='+user.value+'&pass='+pass.value // 查询字符串
    xhr.send(data)

    // 5.等待 请求 状态改变
    xhr.onreadystatechange = function (){
        if (xhr.readyState === 4) {// 请求完成
            // console.log( xhr.responseText )// 服务端响应的数据（字符串）
            let json = JSON.parse(xhr.responseText)// 解析成json对象
            // 登录结果反馈给用户
            alert(json.msg)
            // 判断是否登录成功
            if (json.code == 1) {
                // 登录成功，跳转到百度首页
                location.href = 'https://www.baidu.com/'
            }
        }
    }
}


</script>
</body>
</html>